<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    &lt;!&ndash; Bootstrap table &ndash;&gt;-->
<!--    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>-->
<!--    &lt;!&ndash;bootstrap&ndash;&gt;-->
<!--    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">-->
<!--    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>-->
<!--    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>-->
<!--    &lt;!&ndash;bootstrap-table&ndash;&gt;-->
<!--    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">-->
<!--    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>-->
<!--    &lt;!&ndash;bootstrap-table-lanuage&ndash;&gt;-->
<!--    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>-->
    <script src="/js/jquery.min.js"></script>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!--    <link href="/css/bootstrap-table.min.css" rel="stylesheet">-->
    <script src="/js/bootstrap.min.js"></script>
    <script src="/dist/bootstrap-table.min.js"></script>
</head>
<script>
    $(function(){
        initTable();
    });
    function initTable(){
        var url = "rolelist";
        $('#table').bootstrapTable({
            method:'GET',
            dataType:'json',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            striped: true,                              //是否显示行间隔色
            // sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            url:url,
            pagination:true,
            search:true,
            queryParams : function(params){
                return params
            },
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize:3,                       //每页的记录行数（*）
            pageList: [5, 10, 15, 20],
            onLoadSuccess:function(){
                $("[name='status']").click(function () {
                    var roleId = $(this).attr("roleId"),roleStatus = $(this).attr("roleStatus");
                    jinqiModel(roleId,roleStatus)
                })
                $("[name='update']").click(function(){
                    var roleId=$(this).attr("roleId");
                    editModel(roleId)
                })
            },
            columns: [
                {
                    field : 'roleid',
                    title : 'ID',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                }, {
                    field : 'rolename',
                    title : '角色名称',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                }, {
                    field : 'roledate',
                    title : '创建时间',
                    align : 'center',
                    valign : 'middle'
                }, {
                    field : 'rolestatus',
                    title : '状态',
                    formatter:function(value,row,index){
                        if(row.rolestatus==0){
                            return "启用";
                        }if (row.rolestatus==1){
                            return "禁用";
                        }
                    },
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                    },{
                    field : '',
                    title : '操作',
                    align : 'center',
                    valign : 'middle',
                    sortable : true,
                    formatter : function (value, row, index){
                        var con = '<button type="button" roleId="'+row.roleid+'" class="btn btn-primary"  name="update">编辑</button >  ';
                        if(row.rolestatus==0){
                            con += '<button type="button" name="status" roleId="'+row.roleid+'" roleStatus="'+row.rolestatus+'" class="btn btn-danger">禁用</button >';
                        }if (row.rolestatus==1){
                            con += '<button type="button" name="status" roleId="'+row.roleid+'" roleStatus="'+row.rolestatus+'" class="btn btn-success">启用</button >';
                        }
                        return con;
                    }
                }]
        });
    }
    //修改
    function editModel(id) {
        $("#a").toggle();
        $.ajax({
            url: "showid",
            type: "get",
            data: {
                roleid: id,
            },
            success: function (a) {
                alert(JSON.stringify(a));
                for (var i in a){
                   $("#roleid").val(a.roleid);
                    $("#rolename").val(a.rolename);
                    $("#roleate").val(a.roledate);
                    $("#rolestatus").val(a.rolestatus);
                }
            }
        })
    }
    //禁用and 启用
    function jinqiModel(id,rolestatus) {
        $.ajax({
            url: "jyAndqy",
            type: "get",
            data: {
                roleid: id,
                rolestatus: rolestatus,
            },
            success: function (a) {
                alert(a);
                location = "rolehtml";
            }
        })
    }
    function add() {
        $.ajax({
            url: "roleadd",
            type: "post",
            data: $("#f").serialize(),
            success: function (a) {
                alert(a);
                location = "rolehtml";
            }
        })
    }
    $(function(){
        $("#a").hide();
    })
    function update() {
        $.ajax({
            url: "update",
            type: "post",
            data: $("#a").serialize(),
            success: function (a) {
                location = "rolehtml";
            }
        })
    }
</script>
<body>
<div class="container">
    <div >
        <button type="button" class="btn btn-primary" style="margin-left: 1050px;margin-top: 5px"  data-toggle="modal" data-target=".bs-example-modal-lg">新建</button >
    </div>
    <div class="select">
    </div>
    <div>
        <table id="table"></table>
    </div>
    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form id="f" class="form-horizontal" >
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">角色名称</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="modal_bj_no" name="rolename">
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label" >状态</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="modal_mj_cst" name="rolestatus">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sava-edit-btn" onclick="add()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-------------------------------------------------------------------------------------------------->
<form  id="a">
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">角色id</label>
        <div class="col-sm-9">
            <input type="text" class="form-control"  name="roleid" id="roleid">
        </div>
    </div>
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">角色名称</label>
        <div class="col-sm-9">
            <input type="text" class="form-control"  name="rolename"id="rolename">
        </div>
    </div>
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">创建时间</label>
        <div class="col-sm-9">
            <input type="text" class="form-control"  name="roleate" id="roleate">
        </div>
    </div>
    <div class="form-group">
        <label for="" class="col-sm-2 control-label" >状态</label>
        <div class="col-sm-9">
            <input type="text" class="form-control"  name="rolestatus" id="rolestatus">
        </div>
    </div>
    <button type="button" class="btn btn-primary" onclick="update()">保存</button>
</form>
</body>
</html>